<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <title>UserList</title>
    <link rel="stylesheet" type="text/css" th:href="@{/static/layui/css/layui.css}"/>
</head>
<body>
    <form class="layui-form layui-row layui-col-space16">
        用户姓名
        <div class="layui-inline">
            <input type="text" name="name" value="" placeholder="请输入用户姓名" class="layui-input" lay-affix="clear">
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">用户性别</label>
            <div class="layui-input-block">
                <select id="genderId" name="gender">
                    <option value="">请选择性别</option>
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">所属科室</label>
            <div class="layui-input-block">
                <select id="departmentId" name="departmentId">
                    <option value="">请选择科室</option>
                </select>
            </div>
        </div>

        <div class="layui-inline">
            <button class="layui-btn" lay-submit lay-filter="submitSearch">查询</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </form>

    <table class="layui-hide" id="tableID" lay-filter="tableID"></table>

    <script th:src="@{/static/layui/layui.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{/static/jquery-2.1.4.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{/static/mylayer.js}" type="text/javascript" charset="utf-8"></script>

    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn" lay-event="add">添加</button>
            <button class="layui-btn layui-btn-danger" lay-event="deleteAll">批量删除</button>
        </div>
    </script>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

    <script type="text/html" id="imageTemplet">
        <img src="{{d.image}}">
    </script>

    <script type="text/html" id="statusTemplet">
        <input type="checkbox" name="status" value="{{= d.id }}" title="正常|禁用"
               lay-skin="switch" lay-filter="statusFilter" {{= d.status==1?"checked":""}}>
    </script>

    <script type="text/html" id="roleTemplet">
        {{# if(d.role == 1) {         }}
                管理员
        {{# } else if(d.role == 2) {  }}
                医生
        {{# }                         }}
    </script>

    <script>
        layui.use(['table', 'form'], function(){
            var table = layui.table;
            var form = layui.form;

            form.on('switch(statusFilter)', function(obj){
                var id = this.value;
                var checked = obj.elem.checked;
                console.log(checked);
                var status = checked ? 1 : 0;
                $.post(
                    "/user/updateStatus",
                    {"id" : id, "status" : status},
                    function (result) {
                        console.log(result);
                        if(result.code == 0) {
                            mylayer.okMsg(result.msg);
                        } else {
                            mylayer.errorMsg(result.msg);
                        }
                    },
                    'json'
                );
            });

            table.render({
                elem: '#tableID',
                url:'/user/selectByPage',
                toolbar: '#toolbarDemo',
                page: true,
                //height: '315px',
                cols: [
                    [
                    {type: 'checkbox', fixed: 'left'},
                    {field:'id', fixed: 'left', title: 'ID', sort: true},
                    {field:'name', title: '用户姓名'},
                    {field:'image', title: '用户头像', templet: '#imageTemplet'},
                    {field:'age', title: '用户年龄'},
                    {field:'gender', title: '用户性别'},
                    {field:'departmentName', title: '所属科室'},
                    {field:'role', title: '用户权限', templet: '#roleTemplet'},
                    {field:'status', title: '账号状态', templet: '#statusTemplet'},
                    {field:'createTime', title: '就职时间'},
                    {fixed: 'right', title:'操作', width: 190, toolbar: '#barDemo'}
                    ]
                ]
            });

            $(function () {
                $.post(
                    '/department/selectAll',
                    {'department':$(this).val()},
                    function (jsonObj) {
                        console.log(jsonObj);
                        $(jsonObj).each(function () {
                            $('#departmentId').append('<option value="' + this.id + '">' + this.name + '</option>');
                        })
                        form.render("select");
                    },
                    'json'
                )
            });

            // 工具栏事件
            table.on('toolbar(tableID)', function(obj){
                var id = obj.config.id;
                var checkStatus = table.checkStatus(id);
                var othis = lay(this);
                switch(obj.event){
                    case 'deleteAll':
                        var data = checkStatus.data;
                        console.log('data: ' + data);
                        var ids = new Array();
                        $(data).each(function () {
                            ids.push(this.id);
                        })
                        console.log('ids: ' + ids);
                        layer.confirm('确认要删除吗？', {icon: 3, title: "提示"}, function (index) {
                            $.post(
                                "/user/deleteAll",
                                {'ids': ids},
                                function (result) {
                                    console.log(result);
                                    if(result.code == 0) {
                                        mylayer.okMsg(result.msg);
                                        table.reload('tableID');
                                    } else {
                                        mylayer.errorMsg(result.msg);
                                    }
                                },
                                'json'
                            );
                        });
                        break;
                    case 'add':
                        layer.open({
                            type: 2,
                            title: '添加数据',
                            area: ['80%','80%'],
                            content: "/page/user/add"
                        })
                        break;
                }
            });

            //触发单元格工具事件
            table.on('tool(tableID)', function(obj){ // 双击 toolDouble
                var data = obj.data;
                //console.log(obj)
                console.log(data);
                if(obj.event === 'del'){
                    layer.confirm('确认要删除吗？', {icon: 3, title: "提示"}, function(index){
                        $.post(
                            "/user/deleteById",
                            {'id': data.id},
                            function (result) {
                                console.log(result);
                                if(result.code == 0) {
                                    mylayer.okMsg(result.msg);
                                    table.reload('tableID');
                                } else {
                                    mylayer.errorMsg(result.msg);
                                }
                            },
                            'json'
                        );
                    });
                } else if(obj.event === 'edit'){
                    layer.open({
                        title: '编辑',
                        type: 2,
                        area: ['80%','80%'],
                        content: '/page/user/update?id=' + data.id
                    });
                }
            });

            // 搜索提交
            form.on('submit(submitSearch)', function(data){
                var field = data.field; // 获得表单字段
                // 执行搜索重载
                table.reload('tableID', {
                    page: {
                        curr: 1 // 重新从第 1 页开始
                    },
                    where: field // 搜索的字段
                });
                //layer.msg('搜索成功<br>此处为静态模拟数据，实际使用时换成真实接口即可');
                return false; // 阻止默认 form 跳转
            });

        });
    </script>
</body>
</html>
